<template>
  <div>
    <a-space :size="100">
      <a-select
        default-value="管理端"
        style="width: 120px"
        @change="handleChange"
      >
        <a-select-option value="1"> 管理端 </a-select-option>
        <a-select-option value="2"> 客户端 </a-select-option>
      </a-select>
      <a-button type="primary" @click="addMenu"> 新增一级菜单 </a-button>
    </a-space>
    <a-table :columns="columns" :data-source="data" @expand="expand">
      <span slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="showModal(record)">修改</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="addTowMenu(record)">添加二级菜单</a>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定要删除吗"
          ok-text="是的"
          cancel-text="取消"
          @confirm="confirm(record)"
        >
          <a href="javascript:;" style="color: red">删除</a>
        </a-popconfirm>
      </span>
      <a-table
        size="middle"
        :columns="columns"
        :data-source="innerData"
        :pagination="false"
        slot="expandedRowRender"
        @expand="innirExpand"
        bordered
      >
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="showModal(record)">修改</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="addThreeenu(record)">添加三级菜单</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定要删除吗"
            ok-text="是的"
            cancel-text="取消"
            @confirm="confirm(record)"
          >
            <a href="javascript:;" style="color: red">删除</a>
          </a-popconfirm>
        </span>
        <a-table
          size="small"
          :columns="columns"
          :data-source="sanjiData"
          :pagination="false"
          slot="expandedRowRender"
          bordered
        >
          <span slot-scope="text, record" slot="action">
            <a href="javascript:;" @click="showModal(record)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除吗"
              ok-text="是的"
              cancel-text="取消"
              @confirm="confirm(record)"
            >
              <a href="javascript:;" style="color: red">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-table>
    </a-table>
    <!-- //修改菜单 -->
    <a-modal
      v-model="visible"
      title="修改菜单"
      @ok="handleOk"
      cancelText="取消"
      okText="确定"
    >
      <p>
        菜单名字：
        <a-input :maxLength="128" v-model="eidtMuen.permissionName" />
      </p>
      <p>
        PATH： <a-input :maxLength="128" v-model="eidtMuen.permissionUrl" />
      </p>
      <p>
        随机排序：
        <a-input :maxLength="128" v-model="eidtMuen.permissionSort" />
      </p>
      <p>
        菜单路径 <a-input :maxLength="128" v-model="eidtMuen.permissionPath" />
      </p>
      <p>图标地址： <a-input :maxLength="128" v-model="eidtMuen.icon" /></p>
      <p>
        重定向路径
        <a-input :maxLength="128" v-model="eidtMuen.permissionRedirect" />
      </p>
    </a-modal>
    <!-- //新增菜单 -->
    <a-modal
      v-model="visibles"
      title="添加菜单"
      @ok="handleOks"
      cancelText="取消"
      okText="确定"
    >
      <p>菜单名字： <a-input v-model="newMuen.permissionName" /></p>
      <p>随机排序： <a-input v-model="newMuen.permissionSort" /></p>
      <p>PATH <a-input v-model="newMuen.permissionUrl" /></p>
      <p>菜单路径： <a-input v-model="newMuen.permissionPath" /></p>
      <p>重定向路径 <a-input v-model="newMuen.permissionRedirect" /></p>
      <p>图标地址： <a-input v-model="newMuen.icon" /></p>
      <p>
        服务端口：
        <a-select
          default-value="1"
          style="width: 120px"
          v-model="newMuen.terminal"
        >
          <a-select-option value="1"> 管理端 </a-select-option>
          <a-select-option value="2"> 客户端 </a-select-option>
        </a-select>
      </p>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  { title: "菜单名字", dataIndex: "permissionName", key: "permissionName" },
  {
    title: "重定向",
    dataIndex: "permissionRedirect",
    key: "permissionRedirect",
  },
  { title: "客户端/管理端", dataIndex: "terminal", key: "terminal" },
  { title: "ICON", dataIndex: "icon", key: "icon" },
  { title: "Path", dataIndex: "permissionUrl", key: "permissionUrl" },
  { title: "菜单路径", dataIndex: "permissionPath", key: "permissionPath" },
  { title: "菜单类型", dataIndex: "isMenu", key: "isMenu" },
  {
    title: "操作",
    dataIndex: "",
    key: "x",
    scopedSlots: { customRender: "action" },
  },
];

import {
  sys_permission,
  zj_permission,
  add_menus,
  edit_menus,
  del_menus,
} from "../../apis/setViews";
export default {
  created() {
    this.getTableList();
  },
  data() {
    return {
      data: [],
      columns,
      innerData: [],
      sanjiData: [],
      RowKeys: [],
      innirRowKeys: [],

      //模态框显示隐藏
      visible: false,
      visibles: false,

      // 修改菜单
      eidtMuen: {
        permissionName: "",
        permissionUrl: "",
        icon: "",
        permissionId: "",
        permissionPath: "",
        permissionRedirect: "",
        permissionSort: "",
      },
      //新增菜单
      newMuen: {
        icon: "",
        isMenu: "1",
        parentPermissionId: "",
        permissionLv: "1",
        permissionName: "",
        permissionSort: "",
        permissionUrl: "",
        terminal: "1",
        permissionPath: "",
        permissionRedirect: "",
      },
    };
  },
  methods: {
    // 页面请求管理端默认数据
    async getTableList() {
      let { code, responseBody } = await sys_permission("2");
      if (code === "10000") {
        this.data = responseBody;
      }
    },
    //新增一级菜单
    addMenu() {
      this.newMuen.parentPermissionId = "-1";
      this.newMuen.permissionLv = "1";
      this.newMuen.isMenu = "1";
      this.visibles = true;
    },
    //修改菜单
    showModal(record) {
      this.eidtMuen.permissionName = record.permissionName;
      this.eidtMuen.permissionUrl = record.permissionUrl;
      this.eidtMuen.icon = record.icon;
      this.eidtMuen.permissionId = record.key;
      this.eidtMuen.permissionPath = record.permissionPath;
      this.eidtMuen.permissionRedirect = record.permissionRedirect;
      this.eidtMuen.permissionSort = record.permissionSort;
      this.visible = true;
    },
    //确认修改
    async handleOk() {
      let { code } = await edit_menus(this.eidtMuen);
      if (code === "10000") {
        // this.getTableList();
        this.visible = false;
      }
    },
    //新增菜单按钮
    async handleOks() {
      let { code } = await add_menus(this.newMuen);
      if (code === "10000") {
        this.getTableList();
        this.visibles = false;
      }
    },
    // 改变端口请求表格数据
    async handleChange(value) {
      let { code, responseBody } = await sys_permission(value);
      this.data = [];
      if (code === "10000") {
        this.data = responseBody;
      }
    },
    //一级菜单展开
    async expand(expanded, record) {
      if (expanded === true) {
        let { code, responseBody } = await zj_permission(record.key);
        if (code === "10000") {
          this.innerData = responseBody;
          this.RowKeys = [];
          this.RowKeys.push(String(record.permissionId));
        }
      }
    },
    // 二级菜单展开
    async innirExpand(expanded, record) {
      if (expanded === true) {
        let { code, responseBody } = await zj_permission(record.key);
        if (code === "10000") {
          this.sanjiData = responseBody;
        }
      }
    },
    //添加二级菜单
    async addTowMenu(record) {
      this.newMuen.parentPermissionId = record.key;
      this.newMuen.permissionLv = "2";
      this.newMuen.isMenu = "0";
      this.visibles = true;
    },
    //添加三级菜单
    addThreeenu(record) {
      this.newMuen.parentPermissionId = record.key;
      this.newMuen.permissionLv = "3";
      this.newMuen.isMenu = "2";
      this.visibles = true;
    },
    //删除菜单
    async confirm(record) {
      let { code } = await del_menus(record.key);
      if (code === "10000") {
        this.getTableList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
